<template>
    <div class="box">

        <div class="left-card-box">
            <RoleCard
            :pageDict="pageDict"/>
        </div>
        <div class="table-card-box">
            <I18nTableCard ref="tableCard" />
        </div>
            
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import RoleCard from './components/RoleCard.vue';
import { useStore } from '@/stores/counter';
import $kt from '@/vueKantboot';
import I18nTableCard from './components/I18nTableCard.vue';

let store = useStore();

let pageDict = ref({
    addRole: "",
    code: "",
    description: "",
    name: "",
    editRole: "",
});

const getPageDict = async (code: string) => {
    return await $kt.request.request({
        url: "/system/page/getDictMap",
        method: "post",
        data: { code }
    });
}

getPageDict("adminManageRoleManage").then((res: any) => {
    pageDict.value = res.data.data;
});

store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getPageDict("adminManageRoleManage").then((res: any) => {
            pageDict.value = res.data.data;
        });
    }
});

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}

.card {
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.left-card-box{
    display: inline-block;
    width: 240px;
    height: 100%;
    margin-right: 20px;
    color: #666666;
}

.table-card-box{
    display: inline-block;
    width: calc(100% - 240px - 20px);
    height: 100%;
}
</style>